<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>骡窝日报详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
			<script src="/js/jquery/jquery.min.js"></script>
			<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
			<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
			<link rel="stylesheet" href="/css/reset.css"/>
			<link rel="stylesheet" href="/css/newsContent.css">
			<script src="/js/plugins/jrender/jrender.min.js"></script>
			<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
			<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>
		<script>
            var userStr = sessionStorage.getItem("user");
            var user;
            if (userStr) {
                user = JSON.parse(userStr);
            }
            var greatStatus;//点赞状态
            var enshrineStatus;//收藏状态
            var signId ; //标记对象的id
			$(function () {
				var id = getParams().id;
                $.get(baseUrl+"/news/"+id,function (data) {
					$('.newsDetail').renderValues(data)
                    var json = {"id": getParams().id, "browseNum": data.browseNum + 1};
                    $.ajax({
                        type: "PUT",
                        url: baseUrl+"/news",
                        data: json
                    });
                })
				//跳转到评论界面
                $("#commentBtn").click(function () {
                    window.location.href = "/mine/newsComment.html?id=" + id
                })



                //如果是用户查询标记状态
                if (user) {
                    $.get(baseUrl + "newsSigns/" + id, function (data) {
                        if (data) {
                            //如果有新建过sign对象获取id
                            signId = data.id;

                        }
                        //回显标记状态
                        if (data.greatStatus) {
                            $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                            greatStatus = true;
                        }
                        if (data.enshrineStatus) {
                            $("#collectBtn").removeClass("fa-star-o").addClass("fa-star");
                            enshrineStatus = true;
                        }
                    })
                }
                //查询当前攻略的点赞和收藏总数
                $.get(baseUrl + "newsSigns/count/" + id, function (data) {
                    //渲染数据
                    $(".news").renderValues(data);

                });

                //绑定点赞和收藏点击效果
                $("#collectBtn").click(function () {
                    //如果不是用户跳转到登录页面
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: true,
                            content: '登录之后才能收藏哦!',
                            onClickConfirmBtn: function () {
                                window.location.href = "/login.html";
                            }
                        });

                    } else {
                        //如果是用户则改变收藏的动画效果并改变收藏的状态
                        changeClass($(this), "fa-star-o", "fa-star");
                        enshrineStatus = !enshrineStatus;
                        var json = {
                            'news.id': id,
                            enshrineStatus: enshrineStatus,
                            greatStatus: greatStatus
                        };
                        //发送请求更新用户的标记状态和更新大攻略的收藏总数
                        if (!signId) {//根据标记对象id判断是发送新增还是更新请求
                            //新增
                            $.post(baseUrl + "newsSigns", json, function (data) {
                                $("#collectBtn").html(data.data.enshrineStatus);
                            });
                            $.get(baseUrl + "newsSigns/count/" + id, function (data) {
                                //回显收藏总数
                                $("#collectBtn").html(data.greatStatus);
                            });
							//新增操作要生成一个状态id来判断下次是更新操作
							$.get(baseUrl + "newsSigns/" + id, function (data) {
								if (data) {
									//如果有新建过sign对象获取id
									signId = data.id;
								}
							});

                        } else {
                            //更新
                            $.ajax({
                                url: baseUrl + "newsSigns/" + signId,
                                method: "put",
                                data:json,
                                success: function (data) {
                                    //回显收藏总数
                                    $("#collectBtn").html(data.data.enshrineStatus);
                                }
                            })

                        }

                    }

                })

                $("#likeBtn").click(function () {
                    //如果不是用户跳转到登录页面
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: true,
                            content: '登录之后才能点赞哦!',
                            onClickConfirmBtn: function () {
                                window.location.href = "/login.html";
                            }
                        });

                    } else {
                        //如果是用户则改变点赞的动画效果并改变点赞的状态
                        changeClass($(this), "fa-thumbs-o-up", "fa-thumbs-up");
                        greatStatus = !greatStatus;
                        var json = {
                            'news.id': id,
                            enshrineStatus:enshrineStatus,
                            greatStatus: greatStatus

                        };
                        //发送请求更新用户的标记状态和更新大攻略的点赞总数
                        if (!signId) {//根据标记对象id判断是发送新增还是更新请求
                            //新增
                            $.post(baseUrl + "newsSigns", json, function (data) {
                                if (data.success){
                                    //更新点赞总数
                                    $("#likeBtn").html(data.data.greatStatus);
                                }
                            });
							//新增操作要生成一个状态id来判断下次是更新操作
							$.get(baseUrl + "newsSigns/" + id, function (data) {
								if (data) {
									//如果有新建过sign对象获取id
									signId = data.id;
								}
							});


                        } else {
                            //更新
                            $.ajax({
                                url: baseUrl + "newsSigns/" + signId,
                                method: "put",
                                data:json,
                                success: function (data) {
                                    if (data.success){
                                        //更新点赞总数
                                        $("#likeBtn").html(data.data.greatStatus);
                                    }
                                }
                            })

                        }

                    }


                })

            })
		</script>
	</head>

	<body>
		<div class="newsDetail">
			<div>
			<a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
				<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
			</a>
			<img render-src="coverUrl">

			<div class="container">
				<div class="row typeRow">
					<div class="col-4">
						<span class="type" >美图美文</span>
					</div>
					<div class="col-4">
						<span class="type">By骡窝官方</span>
					</div>

					<div class="col-4">
                    <span id="commentBtn">
                        <i class="fa fa-commenting-o commentBtn" style="color: #479eff;font-size: 15px"></i><a
							class="commentBtn">评论</a>
                    </span>
					</div>

				</div>

				<div class="detail">
					<h2 class="title" render-html="title"></h2>
					<h2 class="releaseTime" render-html="releaseTime"></h2>

					<div class="content" render-html="newsContent.content">
					</div>
				</div>
				<hr/>
				<div class="container d-flex news">
					<div class="col-4">
						<i class="fa fa-thumbs-o-up handleBtn" id="likeBtn" style="color: black"
						   render-html="greatStatus"> </i>&nbsp;&nbsp;
					</div>
					<div class="col-4">
						<i class="fa fa-star-o handleBtn" id="collectBtn" render-html="enshrineStatus"> </i>&nbsp;&nbsp;
					</div>
					<div class="col-4">
						<i class="fa fa-eye handleBtn" id="browseBtn" render-html="browseNum">11 </i>
					</div>
				</div>

			</div>
			</div>
		</div>
	

</body>

</html>